<template>
  <nav class="top-nav">
    <div class="nav-left">
      <button class="menu-button">
        <MenuFoldIcon />
      </button>
      <button class="search-button">
        <SearchIcon />
      </button>
    </div>

    <div class="nav-center">
      <router-link to="/" class="logo">
        News Reader
      </router-link>
    </div>

    <div class="nav-right">
      <button class="subscribe-button">SUBSCRIBE FOR $1/WEEK</button>
      <button class="login-button">LOG IN</button>
    </div>
  </nav>
</template>

<script>
import { MenuFoldIcon,SearchIcon } from 'tdesign-icons-vue-next';

export default {
  name: 'TopNav',
  components: {
    MenuFoldIcon,SearchIcon
  }
}
</script>

<style scoped>
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-left, .nav-center, .nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.nav-left {
  justify-content: flex-start;
}

.nav-center {
  justify-content: center;
  flex: 2;
}

.nav-right {
  justify-content: flex-end;
}

.menu-button, .search-button {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  font-size: 18px;
}

.logo {
  font-family: "nyt-cheltenham", georgia, "times new roman", times, serif;
  font-size: 24px;
  text-decoration: none;
  color: #000;
}

.subscribe-button {
  background-color: rgb(86, 123, 149);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.login-button {
  background: none;
  border: 1px solid #e2e2e2;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

[theme-mode="dark"] .top-nav {
  background-color: #242424;
  border-color: #333;
}

[theme-mode="dark"] .logo {
  color: #fff;
}

[theme-mode="dark"] .menu-button,
[theme-mode="dark"] .search-button {
  color: #fff;
}

[theme-mode="dark"] .login-button {
  color: #fff;
  border-color: #333;
}
</style> 